import {Swiper, SwiperSlide} from 'swiper/react';
import {Autoplay, Pagination} from 'swiper'
import {Container} from './RotationChartStyle.js'
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/pagination';

import picture1 from '../../../assets/mainIconfont/picture1.jpg'
import picture2 from '../../../assets/mainIconfont/picture2.jpg'
import picture3 from '../../../assets/mainIconfont/picture3.jpg'
import picture4 from '../../../assets/mainIconfont/picture4.jpg'

export default () => {
  return (
    <Container>
      <Swiper
        modules={[Autoplay, Pagination]}
        loop
        autoplay={{
          delay: 3000,
          disableOnInteraction: false  // 触碰后不会停止
        }}
        pagination
      >
        <SwiperSlide className='swiper-slide'><img src={picture1} alt=""/></SwiperSlide>
        <SwiperSlide className='swiper-slide'><img src={picture2} alt=""/></SwiperSlide>
        <SwiperSlide className='swiper-slide'><img src={picture3} alt=""/></SwiperSlide>
        <SwiperSlide className='swiper-slide'><img src={picture4} alt=""/></SwiperSlide>
      </Swiper>
    </Container>
  );
};
